<template>
  <div class='container'>
  <el-form ref="form" :model="form" label-width="80px">
  <el-row class="head">
  <el-row type="flex" justify="space-between">
  <el-col :span="6">
    <span class="fontSize">标签名称</span>
    <el-input v-model="tagName" placeholder="请输入"></el-input>
  </el-col>
  <el-col :span="6">
    <span class="fontSize" style="text-align: right">城市</span>
    <template>
  <el-select v-model="city" placeholder="请选择" style="width:70%;" @change="cityChange()">
    <el-option
      v-for="(item,index) in form.citys"
      :key="index"
      :label="item"
      :value="item"
     >
    </el-option>
  </el-select>
</template>
  </el-col>
  <el-col :span="6">
    <span class="fontSize" style="text-align: right" >地区</span>
    <template>
  <el-select v-model="region" placeholder="请选择" style="width:70%;" @change="regionChange()">
    <el-option
      v-for="(item,index) in form.regions"
      :key="index"
      :label="item"
      :value="item"
      >
    </el-option>
  </el-select>
</template>
  </el-col>
  <el-col :span="6">
    <span class="fontSize">企业简称</span>
    <el-input v-model="enterpriseName" placeholder="请输入" style="padding-right:12px"></el-input>
  </el-col>
</el-row>
  <el-col :span="6">
    <span class="fontSize" style="text-align: right">状态</span>
    <template>
  <el-select v-model="state" placeholder="请选择" style="width:96%;">
    <el-option
    v-for="(item,index) in form.states"
    :key="index"
    :label="item"
    :value="item"
     >
    </el-option>
  </el-select>
</template>
  </el-col>
  <el-col :span="6">
    <el-button style="margin-left:50px" size="mini" @click="removeList()">清除</el-button>
    <el-button type="primary" size="mini" @click="searchList()">搜索</el-button>
  </el-col>
    <el-col :span="12" style="text-align: right">
      <el-button type="success" icon="el-icon-edit" class="addClass">新增学科</el-button>
    </el-col>
  </el-row>
  </el-form>
    <el-alert
    :title="'数据一共'+comNumber+'条'"
    type="info"
    show-icon
    style="margin:40px 0 20px">
  </el-alert>
   <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        :index="indexMethod">
      </el-table-column>
      <el-table-column
        prop="number"
        label="企业编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="company"
        label="企业简称">
      </el-table-column>
      <el-table-column
        prop="tags"
        label="标签">
      </el-table-column>
      <el-table-column
        prop="creatorID"
        label="创建者">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注">
      </el-table-column>
      <el-table-column
        prop="isFamous"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="scope">
        <el-button type="primary" plain
        @click="handleClick(scope.row)"
        icon="el-icon-edit" circle></el-button>
        <el-tooltip
        class="item"
        effect="dark"
        content="禁用"
        placement="top">
          <el-button
            type="warning" plain
            icon="el-icon-close" circle
          @click="disableBtn(scope.row)"></el-button>
        </el-tooltip>
        <el-button
        type="danger" plain
        icon="el-icon-delete" circle
        @click="deleteBtn(scope.row)"
        ></el-button>
      </template>
      </el-table-column>
    </el-table>
  </template>
  <template>
    <div class="block" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pagesize"
        layout="->,total,prev, pager, next, sizes,jumper"
        :total="comNumber">
      </el-pagination>
    </div>
  </template>
  </div>
</template>

<script>
import { list, remove, disabled } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'  //eslint-disable-line
export default {
  methods: {
    handleClick (row) {
      console.log(row)
    },
    async disableBtn (row) { // 启用 禁用按钮
      console.log(row)
      // const state = ()
      const data = await disabled({ id: row.id, state: row.state === 0 ? 1 : 0 })
      console.log(data.data)
      this.$confirm('已成功禁用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getComLists()
        this.$message({
          type: 'success',
          message: '已成功禁用!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '您取消了操作!'
        })
      })
    },
    deleteBtn (row) { // 删除按钮
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: row.id })
        this.getComLists()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      const num = Number(val)
      this.getComLists({ pagesize: num })
      console.log(typeof num)
    },
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)

      this.getComLists({ page: val })
    },
    async getComLists (obj) { // 获取初始化信息
      this.form.citys = provinces() // 城市
      const { data: res } = await list(obj)
      console.log(res)
      console.log(this.form.citys[0])
      this.comNumber = res.counts
      this.tableData = res.items
      this.page = res.page
      this.pagesize = Number(res.pagesize)
    },
    indexMethod (index) { // 序号
      return index + 1
    },
    cityChange () {
      console.log(this.city)
      this.form.regions = citys(this.city)// 地区
      console.log(this.form.regions)
      this.region = this.form.regions[0]
    },
    regionChange () { // 地区选择chang事件
      console.log(this.region)
    },
    removeList () { // 清除搜索列表
      this.tagName = ''
      this.city = ''
      this.region = '' // 选中的地区
      this.enterpriseName = '' // 企业简称
      this.state = '' // 状态
      this.getComLists()
    },
    async searchList () { // 搜索按钮
      if (!this.tagName && !this.city && !this.region && !this.enterpriseName && !this.state) {
        alert('没有可搜索的内容')
      } else {
        console.log(this.city)
        const { data } = await list({
          page: this.page,
          pagesize: Number(this.pagesize),
          tags: this.tagName,
          province: '',
          city: this.city,
          shortName: this.enterpriseName
        })

        console.log(data.items)
        this.tableData = data.items
        this.comNumber = data.counts
      }
    }
  },
  data () {
    return {
      currentPage1: 1,
      currentPage2: 2,
      currentPage3: 3,
      currentPage4: 4,
      tableData: [],
      comNumber: 0,
      form: {
        name: '',
        date1: [],
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        citys: [], // 城市列表
        regions: [], // 地区列表
        states: ['启用', '禁止']
      },
      tagName: '', // 标签名称
      city: '', // 城市选中的哪一个
      region: '', // 选中的地区
      enterpriseName: '', // 企业简称
      state: '', // 状态
      page: '', // 当前页
      pagesize: 10 // 多少条
    }
  },
  created () {
    this.getComLists()
  }
}
</script>

<style lang="less" scoped>
.container {
  background-color: #fff;
  margin: 20px;
  height: 100%;
  overflow: hidden;
  padding: 20px;

  .head {
    margin-bottom: 20px;

    .el-row {
      margin-bottom: 20px;
    }
  }
}

.el-col-6 {
  display: flex;
}

.fontSize {
  font-size: 14px;
  font-weight: 700;
  color: #606266;
  padding-right: 20px;
  width: 100px;
  line-height: 36px;
}
</style>
